<template>
    <transition
        appear
        duration="1000"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        v-bind:css="false"
    >
        <img
            :style="item.position ? item.position : {}"
            :src="toNextImg ? item.next : item.src"
        />
    </transition>
</template>

<script>
import velocity from "velocity-animate";

export default {
    props: ["it", "nextImg"],
    data() {
        return {
            item: this.it
        };
    },

    computed: {
        toNextImg() {
            return this.nextImg;
        }
    },
    methods: {
        animation1(el) {
            velocity(
                el,
                { opacity: 1 },
                {
                    duration: 2000,
                    complete: () => {
                        this.$emit("next", true);
                        this.animation2(el);
                    }
                }
            );
        },
        animation2(el) {
            velocity(
                el,
                { scale: 1.2 },
                {
                    duration: 500,
                    loop: 2,
                    complete: () => {}
                }
            );
            velocity(
                el,
                { opacity: 0 },
                {
                    duration: 1000,
                    complete: () => {
                        el.style.opacity = 0;
                        this.$emit("next", false);
                        this.animation1(el);
                    }
                }
            );
        },
        beforeEnter(el) {
            el.style.opacity = 0;
        },
        enter(el) {
            this.animation1(el);
        },
        leave(el) {
            el.style.opacity = 0;
        }
    }
};
</script>
